<template>
  <div>
    <el-upload
      v-show="false"
      id="quill-upload"
      :action="uploadUrl"
      multiple
      :limit="3"
      :headers="headers"
      list-type="picture"
      :show-file-list="false"
      :before-upload="beforeUpload"
      :on-error="uploadError"
      :on-success="handleExceed"
    >
      <el-button size="small" type="primary"></el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
    <el-row v-loading="uillUpdateImg">
      <quillEditor
        style="height:300px"
        ref="myQuillEditor"
        @change="onEditorChange($event)"
        v-model="value"
        :options="editorOption"
      />
    </el-row>
  </div>
</template>
<script>
/**
 * 富文本编辑器组件，使用方法：
 * 
  import quill from "@/components/quill/index";
  components: { quill },
  <quill ref="quill" @textChange="textChange"></quill>
  methods:{
      textChange(d){
        console.log("富文本内容："+d)
      },
  }
 */
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import axios from "axios";
export default {
  name: "richText",
  components: { quillEditor },
  props: ["content"], //父组件传过来的，将传过来的渲染到富文本编辑器
  data() {
    return {
      headers: {
        Authorization: "",
      },
      uillUpdateImg: false, //根据图片上传状态来确定是否显示loading动画
      uploadUrl: "/common/webupload.shtml", //上传的图片服务器地址
      value: this.content, //富文本内容
      editorOption: {
        //符文本编辑器的配置
        placeholder: "",
        theme: "snow",
        modules: {
          toolbar: {
            container: [
              ["bold", "italic", "underline", "strike"],
              ["blockquote", "code-block"],
              [{ header: 1 }, { header: 2 }],
              [{ list: "ordered" }, { list: "bullet" }],
            //  [{ script: "sub" }, { script: "super" }],
              [{ indent: "-1" }, { indent: "+1" }],
         //     [{ direction: "rtl" }],
         //     [{ size: ["small", false, "large", "huge"] }],
           //   [{ header: [1, 2, 3, 4, 5, 6, false] }],
              [{ color: [] }, { background: [] }],
            //  [{ font: [] }],
              [{ align: [] }],
              ["clean"],
              ["link", "image"],//, "video"
            ],
            handlers: {
              image: function (value) {
                if (value) {
                  // 给个点击触发Element-ui，input框选择图片文件
                  document.querySelector("#quill-upload input").click();
                } else {
                  this.quill.format("image", false);
                }
              },
            },
          },
        },
      },
    };
  },
  created() {
    this.headers["Authorization"] = this.$store.getters.token;
    this.uploadUrl = this.VUE_APP_BASE_API + this.uploadUrl;
  },
  methods: {
    onEditorChange({ quill, html, text }) {
      //富文本编辑器内容发生改变的时候
      this.value = html;
      this.$emit("textChange", html); //将富文本编辑器输入的文本发送给父组件，父组件涉及提交添加或者更改
    },
    onHtml(data) {
      this.value = data;
    },
    beforeUpload() {
      //上传图片之前开启loading
      this.uillUpdateImg = true;
    },
    uploadError() {
      //图片上传失败,关闭loading
      this.uillUpdateImg = false;
      this.$message.error("图片插入失败");
    },
    setContents(contents) {
      this.$refs.myQuillEditor.quill.setContents(contents);
    },
    handleExceed(response, file, fileList) {
      //图片添加成功
      let quill = this.$refs.myQuillEditor.quill;
      console.log(quill);
      if (response.error === 0) {
        let length = quill.getSelection().index;
        // 插入图片 response.data.url为服务器返回的图片地址
        quill.insertEmbed(
          length,
          "image",
          this.VUE_APP_BASE_API + response.url
        );
        // 调整光标到最后
        quill.setSelection(length + 1);
      } else {
        this.$message.error("图片插入失败");
      }
      this.fileList = fileList;
      this.uillUpdateImg = false;
    },
  },
};
</script>
<style>
.ql-snow .ql-picker{
  height: 35px;
}
</style>